<template>
	<view class="fill-width-height pagecontent viewdetail" :class="$thatThemeClassName">
		<view class="page_title">
			<uv-icon class="goBack" name="arrow-left" color="#999" size="22" @click="goBack"></uv-icon>
		</view>
		<scroll-view
			class="fill-height overflow-hidden" 
			scroll-y 
			lower-threshold="20" 
		>
			<swiper 
				class="swiper-container"
				:autoplay="false"
				:circular="true"
				:current="currentIndex"
				@change="onSwiperChange"
			>
				<swiper-item v-for="(item, index) in imageDataList" :key="index" class="fill-width swiper_item">
					<uv-image
						v-if="fileId.length > 0"
						:mode="item.mode"
						:src="item.src"
						height="100%"
						:customStyle="{
							width: '100% !important',
							height: '100% !important',
							display: 'flex',
							justifyContent: 'center'
						}"
						:lazy-load="true"
						:observeLazyLoad="true"
						:showMenuByLongpress="false"
					>
						<template v-slot:error>
							<view style="font-size: 24rpx;">加载失败</view>
						</template>
						<template v-slot:loading>
							<uv-loading-icon color="#999"></uv-loading-icon>
						</template>
					</uv-image>
				</swiper-item>
			</swiper>
		</scroll-view>
		
		<view class="flex-row justify-center tools_btn" style="gap: 10px;padding: 10px;">
			<uv-button type="primary" text="分享" @click="send"></uv-button>
			<uv-button type="success" text="下载" @click="down"></uv-button>
			<uv-button type="warning" text="收藏" @click="collect"></uv-button>
		</view>
	</view>
</template>

<script>
	import viewDetailsLogic from "./viewDetailsLogic"
	export default {
		mixins: [viewDetailsLogic]
	}
</script>

<style lang="scss" scoped>
.pagecontent{
	position: relative;
	width: 100vw;
	height: 100vh;
	:deep(.uv-image__error){
		width: 100% !important;
		height: 100% !important;
	}
	.swiper-container{
		width: 100%;
		height: 100%;
		swiper-item{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		:deep(.uv-image__image){
			height: 100% !important;
		}
		.swiper_item{
			:deep(.uv-image){
				height: 100% !important;
			}
			:deep(.uv-image__loading){
				width: 100% !important;
				height: 100% !important;
			}
		}
		:deep(.uv-image){
			height: 100% !important;
		}
		
		:deep(swiper-item > view){
			height: 100% !important;
		}
		:deep(.uv-image){
			height: 100% !important;
		}
		:deep(.uv-image__loading){
			width: 100% !important;
			height: 100% !important;
		}
	}
	.uv-image{
		height: 100% !important;
	}
	.uv-image{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}
	.page_title{
		position: absolute;
		top: 50px;
		left: 10px;
		z-index: 999;
		border-radius: 50%;
		background-color: white;
		:deep(.uv-icon){
			padding: 6px !important;
		}
	}
	.tools_btn{
		position: absolute;
		bottom: 10px;
		left: 50%;
		margin-left: -90px; 
	}
}
</style>
